<!-- GiftCard.vue -->
<template>
  <div class="gift-card" :style="{ backgroundColor: cardColor }">
    <h2>🎉 给 {{ receiver }} 的礼物</h2>
    <p>🎁 内容：{{ giftContent }}</p>
    <p>💝 祝你天天开心！</p>
  </div>
</template>

<script setup>
// 🧩 定义这个组件接收哪些 props
const props = defineProps({
  receiver: {
    type: String,
    required: true, // 必填！没有收件人怎么送礼物？
    default: '神秘人',
  },
  giftContent: {
    type: String,
    default: '一份惊喜', // 默认礼物内容
  },
  cardColor: {
    type: String,
    default: '#ffeaa7', // 默认卡片颜色（浅黄色）
  },
})
</script>

<style scoped>
.gift-card {
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 16px auto;
  max-width: 300px;
  text-align: center;
  color: #333;
  font-family: Arial, sans-serif;
  transition: transform 0.3s;
}
.gift-card:hover {
  transform: scale(1.02);
}
</style>
